<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Sinwa图片直播</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <meta content="yes" name="apple-mobile-web-app-capable" />
    <meta content="black" name="apple-mobile-web-app-status-bar-style" />
    <meta content="telephone=no" name="format-detection" />
    <meta content="email=no" name="format-detection" />
    <link rel="stylesheet" type="text/css" href="/static/assert/css/reset.css" />
    <link rel="stylesheet" type="text/css" href="/static/assert/css/main.css" />
    <link rel="stylesheet" href="/static/assert/iconfont/iconfont.css">
    <link rel="shortcut icon" href="/static/favicon.ico">
    <script src="/static/assert/js/jquery-3.3.1.min.js"></script>
    <style>
        .match > h2 {
            font-size: 1.2rem;
            color: #292929;
            height: 2.1rem;
            line-height: 2.1rem;
            padding: 0 .5rem;
            background: #e9e9e9;
        }
        .match-item {
            display: flex;
            padding: 6px;
            border-bottom: 1px solid #eee;
        }
        /* .match-item:last-child {
            border: none;
        } */
        .match-item-info, .match-item-teams, .match-item-result {
            height: 70px;
            padding: 5px;
        }
        .match-item-info {
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: center;
            color: #888;
            font-size: 1rem;
        }
        .match-item-info .match-time {
            vertical-align: middle;
            color: #404040;
        }
        .match-item-teams {
            flex: 2;
            display: flex;
            flex-direction: column;
            justify-content: center;
            font-size: 1.1rem;
            color: #404040;
        }
        .match-item-teams > div {
            display: flex;
            justify-content: space-between;
            align-items: center;
            vertical-align: middle;
            padding: 3px;
        }
        /*team的比分*/
        .match-item-teams > div span:last-child {
            color: #888;
        }
        .match-item-teams.isLive > div span:last-child {
            color: red;
        }
        /*视频是否处于直播状态*/
        .match-item .match-item-result {
            font-size: .8rem;
            width: 85px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            color: #888;
        }
        .match-item .match-item-result.isLive {
            color: red;
        }
        .match-item .match-item-result > div:first-child {
            font-size: 1rem;
        }
    </style>
</head>
<body>
<div>
    <header class="header">
        赛程
        <!--用户处于登录状态时，将该按钮隐藏-->
        <a href="login.html">
            <!-- <i class="icon iconfont icon-wode my"></i> -->
            <span class="my">登录</span>
        </a>
    </header>
    <div class="content">
        <div class="match">
            <h2>今天 3月13日 星期二</h2>
            <a href="./detail.html">
                <div class="match-item">
                    <div class="match-item-info">
                        <div class="match-time">
                            08: 00
                            <img src="/static/imgs/match.png" width="25px" height="25px" />
                        </div>
                        <div>NBA常规赛</div>
                    </div>
                    <div class="match-item-teams isLive">
                        <div>
								<span>
									<img src="/static/imgs/team1.png" width="25px" height="25px" />
									马刺
								</span>
                            <span>79</span>
                        </div>
                        <div>
								<span>
									<img src="/static/imgs/team2.png" width="25px" height="25px" />
									火箭
								</span>
                            <span>80</span>
                        </div>
                    </div>
                    <div class="match-item-result isLive">
                        <div>图片直播</div>
                        <div>进行中</div>
                    </div>
                </div>
            </a>
        </div>
        <div class="match">
            <h2>今天 3月14日 星期三</h2>

            <a href="./detail.html">
                <div class="match-item">
                    <div class="match-item-info normal-font">
                        <div class="match-time">
                            08: 00
                            <img src="/static/imgs/match.png" width="25px" height="25px" />
                        </div>
                        <div>NBA常规赛</div>
                    </div>
                    <div class="match-item-teams">
                        <div>
								<span>
									<img src="/static/imgs/team1.png" width="25px" height="25px" /> 马刺
								</span>
                            <span>-</span>
                        </div>
                        <div>
								<span>
									<img src="/static/imgs/team2.png" width="25px" height="25px" /> 火箭
								</span>
                            <span>-</span>
                        </div>
                    </div>
                    <div class="match-item-result">
                        <div>图片直播</div>
                    </div>
                </div>
            </a>
            <a href="./detail.html">
                <div class="match-item">
                    <div class="match-item-info normal-font">
                        <div class="match-time">
                            08: 00
                            <img src="/static/imgs/match.png" width="25px" height="25px" />
                        </div>
                        <div>NBA常规赛</div>
                    </div>
                    <div class="match-item-teams">
                        <div>
								<span>
									<img src="/static/imgs/team1.png" width="25px" height="25px" /> 马刺
								</span>
                            <span>-</span>
                        </div>
                        <div>
								<span>
									<img src="/static/imgs/team2.png" width="25px" height="25px" /> 火箭
								</span>
                            <span>-</span>
                        </div>
                    </div>
                    <div class="match-item-result">
                        <div>图片直播</div>
                    </div>
                </div>
            </a>
            <a href="./detail.html">
                <div class="match-item">
                    <div class="match-item-info normal-font">
                        <div class="match-time">
                            08: 00
                            <img src="/static/imgs/match.png" width="25px" height="25px" />
                        </div>
                        <div>NBA常规赛</div>
                    </div>
                    <div class="match-item-teams">
                        <div>
								<span>
									<img src="/static/imgs/team1.png" width="25px" height="25px" /> 马刺
								</span>
                            <span>-</span>
                        </div>
                        <div>
								<span>
									<img src="/static/imgs/team2.png" width="25px" height="25px" /> 火箭
								</span>
                            <span>-</span>
                        </div>
                    </div>
                    <div class="match-item-result">
                        <div>图片直播</div>
                    </div>
                </div>
            </a>
            <a href="detail.html">
                <div class="match-item">
                    <div class="match-item-info normal-font">
                        <div class="match-time">
                            08: 00
                            <img src="/static/imgs/match.png" width="25px" height="25px" />
                        </div>
                        <div>NBA常规赛</div>
                    </div>
                    <div class="match-item-teams">
                        <div>
								<span>
									<img src="/static/imgs/team1.png" width="25px" height="25px" /> 马刺
								</span>
                            <span>-</span>
                        </div>
                        <div>
								<span>
									<img src="/static/imgs/team2.png" width="25px" height="25px" /> 火箭
								</span>
                            <span>-</span>
                        </div>
                    </div>
                    <div class="match-item-result">
                        <div>图片直播</div>
                    </div>
                </div>
            </a>
        </div>
    </div>
</div>
</body>
</html>
